<template>
  <!-- 年份 月份 单选 -->
  <view
    class="region-picker custom-comp"
    :class="[getDisabled && 'is-disabled', getBorder && 'is-border']"
  >
    <picker
      mode="date"
      style="flex: 1"
      :value="getPickerVal"
      :disabled="getDisabled"
      :fields="fields"
      @change="bindDateChange"
    >
      <PickerValue
        v-if="!getDisabled || getPickerVal"
        style="height: 100%"
        :value-text="getPickerVal"
        :placeholder="getPlaceholder"
        :disabled="getDisabled"
        :icon="'\ue611'"
      />
    </picker>
  </view>
</template>

<script setup lang="ts">
  import { computed, type PropType, ref } from 'vue';
  import PickerValue from './PickerValue.vue';
  import { useFormItem } from '../hooks/useContext';
  import { propTypes } from '@/utils/propTypes';

  const props = defineProps({
    modelValue: propTypes.string,
    fields: {
      type: String as PropType<'year' | 'month' | 'day'>,
      default: 'year',
    },
  });

  const { getProps, setFormModel, formProps } = useFormItem({});

  const getPlaceholder = computed(() => {
    return getProps.value.placeholder || '请选择年份';
  });

  const getBorder = computed(() => !formProps?.border);

  const getDisabled = computed(() => getProps.value.disabled);

  const getPickerVal = computed(() => props.modelValue || getProps.value.modelValue);

  const bindDateChange = (e: any) => {
    setFormModel(e.detail?.value);
  };
</script>

<style lang="scss" scoped>
  @import '../styles/form.scss';
</style>
